<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">

<link rel="stylesheet"
	href="static/iframe/bootstrap/css/bootstrap.min.css" />
<title>用户管理</title>
</head>
<body>

	<h3>百度搜索</h3>
			<div class="input-group" style="width: 300px;">
				<input type="text" class="form-control" id="baidu">
				<div class="input-group-btn">
					<button type="button" style="height: 34px;"
						class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu dropdown-menu-right" role="menu">
					</ul>
				</div>
				<!-- /btn-group -->
			</div>

</body>
<jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include>
<script type="text/javascript"
	src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="static/iframe/bootstrap/bootstrap-suggest/bootstrap-suggest.min.js"></script>

<script type="text/javascript">
	$("#baidu").bsSuggest({
		clearable : true,//是否可清除已输入的内容
		showHeader : true,//是否显示选择列表的 header。为 true 时，有效字段大于一列则显示表头
		showBtn : true, //是否显示下拉按钮
		allowNoKeyword : false, //是否允许无关键字时请求数据
		getDataMethod : "url", //获取数据的方式，url
		delay : 300,//搜索触发的延时时间间隔，单位毫秒
	    url: 'user/tableView1?search=', //请求数据的url
		effectiveFieldsAlias : {
			id : "ID",
			realName : "姓名",
			salary : "薪资"
		},//有效字段的别名对象，用于 header 的显示
		fnProcessData : function(json) { //格式化数据的方法，返回数据格式参考 data 参数
			var index, len, data = {
				value : []
			};
			if (!json || !json.value || json.value.length === 0) {
				return false;
			}

			len = json.value.length;
			for (index = 0; index < len; index++) {
				//表头显示的列
				data.value.push({
					id : json.value[index].id,
					realName : json.value[index].realName,
					salary : json.value[index].salary
				});
			}
			return data;
		}
	}).on('onDataRequestSuccess', function(e, result) {
		console.log('onDataRequestSuccess: ', result);
	}).on('onSetSelectValue', function(e, keyword, data) {
		//选中下拉菜单的值后触发的事件
		$("#baidu").val(data.id + "" + data.realName + "" + data.salary);
	}).on('onUnsetSelectValue', function() {
		console.log("onUnsetSelectValue");
	}); 
</script>
</html>